import React, { Component } from 'react';
import { messages } from 'share/common';
import { connect } from 'react-redux';
import constants from 'share/constants';
import invoiceBagService from 'containers/setting/invoice-bag/invoice-bag.service';
import { Button, Divider, message, Table, Popconfirm, Popover } from 'antd';
import menuRoute from 'routes/menuRoute';
import ResizeTable from "components/resize-table";

class InvoiceBagGroup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      invoiceBagList: [], //list
      columns: [
        {
          title: messages('setting.key767')/*序号*/,
          dataIndex: 'index',
          width: '5%',
          render: (value, record, index) => index + 1 + this.state.pagination.pageSize * this.state.pagination.page
        },
        {
          title: messages('setting.key1818')/*首位限制*/,
          dataIndex: 'preFix',
          width: '15%',
          render: (value) => {
            return (
              <Popover placement="topLeft" content={value} overlayStyle={{ maxWidth: 500 }}>
                {value}
              </Popover>
            );
          }
        },
        {
          title: messages('setting.key1816')/*位数限制*/,
          dataIndex: 'maxLength',
          width: '15%',
          render: (value) => {
            return (
              <Popover placement="topLeft" content={value} overlayStyle={{ maxWidth: 500 }}>
                {value}
              </Popover>
            );
          }
        },
        {
          title: messages('setting.key1823')/*关联报销单数量*/,
          dataIndex: 'range',
          width: '15%',
          render: (value, record) => {
            return (
              <Popover placement="topLeft"
                       content={`${record.minExpenseReportSize} ～ ${record.maxExpenseReportSize}`}
                       overlayStyle={{ maxWidth: 500 }}>
                {record.minExpenseReportSize}～{record.maxExpenseReportSize}
              </Popover>
            );
          }
        },
        {
          title: messages('setting.key1824')/*关联报销单状态*/,
          dataIndex: 'statuses',
          width: '15%',
          render: (value, record) => {
            return (
              <Popover placement="topLeft" content={record.statueList.join('、')}
                       overlayStyle={{ maxWidth: 500 }}>
                {record.statueList.join('、')}
              </Popover>
            );
          }
        },
        {
          title: messages('setting.key730')/*适用公司*/,
          dataIndex: 'companyName',
          width: '20%',
          render: (value) => {
            return (
              <Popover placement="topLeft" content={value} overlayStyle={{ maxWidth: 500 }}>
                {value}
              </Popover>
            );
          }
        },
        {
          title: messages('setting.key2099')/*报销单标签*/,
          dataIndex: 'labels',
          width: '20%',
          render: (value, record) => {
            return (
              <Popover placement="topLeft" content={record.labelsList.join('、')} overlayStyle={{ maxWidth: 500 }}>
                {record.labelsList.join('、') || '-'}
              </Popover>
            );
          }
        },
        {
          title: messages('setting.key1147')/*操作*/,
          width: '20%',
          render: (value, record) => {
            return (
              <div>
                <a
                  onClick={(e) => this.handleEdit(e, record)}>{messages('common.edit')/*编辑*/}</a>
                <Divider type="vertical"/>
                <Popconfirm title={messages('setting.key272'/*确认删除吗？*/)} placement="topRight"
                            okText={messages('common.ok')}
                            cancelText={messages('common.cancel')}
                            onConfirm={(e) => this.handleDelete(e, record)}>
                  <a href="javascript:void(0);">
                    {messages('common.delete')/*删除*/}
                  </a>
                </Popconfirm>
              </div>
            );
          }
        }
      ],
      pagination: {
        total: 0,
        page: 0,
        pageSize: 10,
        showSizeChanger: true,
        showQuickJumper: true,
      },
      newInvoiceBagObjectPage: menuRoute.getRouteItem('new-invoice-bag', 'key'),
      invoiceBagDetail: menuRoute.getRouteItem('invoice-bag-detail', 'key'),

    };
  }

  handleEdit(e, record) {
    let path = this.state.invoiceBagDetail.url.replace(':invoiceBagOID', record.id);
    this.context.router.push(path);
  }

  handleDelete = (e, record) => {
    e.preventDefault();
    this.setState({ loading: true });
    invoiceBagService.deleteInvoiceBagConfig(record.id)
      .then(res => {
        message.success(messages('setting.key213')/*删除成功*/);
        this.getList();
      })
      .catch(err => {
        message.error(messages('common.error'));
      })
      .finally(() => {
        this.setState({ loading: false });
      });
  };


  getList = () => {
    const { pagination } = this.state;
    let params = {
      'page': pagination.page,
      'size': pagination.pageSize,
    };
    invoiceBagService.getInvoiceBag(params)
      .then((invoiceBagList, total) => {
        pagination.total = total;
        pagination.current = pagination.page + 1;
        this.setState({ invoiceBagList, pagination });
      })
      .finally(() => {
        this.setState({
          loading: false,
        });
      });
  };
  /**
   *
   * @param _pagination
   * 分页点击
   */
  onChange = (_pagination) => {
    let pagination = this.state.pagination;
    pagination.page = _pagination.current - 1;
    pagination.pageSize = _pagination.pageSize;
    this.setState({
      pagination,
    }, () => {
      this.getList();
    });
  };

  onClickNew = () => {
    this.context.router.push(this.state.newInvoiceBagObjectPage.url);
  };

  componentDidMount() {
    this.getList();
  }

  render() {
    const { loading, columns, pagination, invoiceBagList } = this.state;
    return (
      <div>
        <div style={{ marginBottom: '10px', marginTop: '10px' }}>
          <Button onClick={this.onClickNew}
                  type={'primary'}>{messages('setting.key786')/*新建规则*/}</Button>
        </div>
        <div className={'invoice-bag-group-table'}>
          <ResizeTable
            bordered
            size={'middle'}
            rowKey={'id'}
            dataSource={invoiceBagList}
            columns={columns}
            loading={loading}
            onChange={this.onChange}
            pagination={pagination}
          />
        </div>
      </div>
    );
  }
}


InvoiceBagGroup.contextTypes = {
  router: React.PropTypes.object
};

export default connect()(InvoiceBagGroup);
